<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin设置元素外边距的宽度特点：
1、块级元素的垂直相邻外边距会合并
2、行内元素实际上不占上下外边距。行内元素的左右外边距不合并
3、浮动元素的外边距也不会合并
4、允许指定负的外边距值，不过使用时要小心
-->
    <style>
        #box{
            width: 620px;
            height: 600px;
            background: rgba(53, 172, 93, 0.16);
        }
        #box>div:nth-child(1){
            width: 600px;
            height: 200px;
            background: rgba(53, 172, 93, 0.93);
        }
        #box>div:nth-child(2){
            width: 200px;
            height: 200px;
            background: rgba(53, 93, 172, 0.93);
            float: left;
        }
        #box>div:nth-child(3){
            width: 200px;
            height: 200px;
            background: rgba(164, 53, 172, 0.93);
            float: left;
            margin: 10px 10px;
        }
        #box>div:nth-child(4){
            width: 200px;
            height: 200px;
            background: rgba(53, 124, 172, 0.93);
            float: left;
        }
        #box>div:nth-child(5){
            width: 600px;
            height: 200px;
            background: rgba(172, 53, 109, 0.93);
            float: left;
        }
        #block{
            width: 60%;
            height: 40px;
            background: aquamarine;
            /*实现让块状元素居中显示*/
            margin: 10px auto;
        }

        #box1{
            width: 200px;
            height: 200px;
            background: rgba(172, 53, 109, 0.93);
            margin-bottom: 40px;
        }
        #box2{
            width: 200px;
            height: 200px;
            background: rgba(53, 172, 101, 0.93);
            margin-top: 50px;
        }
        #father{
            width: 400px;
            height: 400px;
            background: rgba(53, 97, 172, 0.93);
            margin-top: 10px;
            /*如果不交边框，两个元素将一起向上层元素偏移，父子偏移量将合并*/
            border: 1px solid red;
        }
        #son{
             width: 200px;
             height: 200px;
             background: rgba(172, 53, 128, 0.93);
             margin-top: 20px;
         }
    </style>
</head>
<body>
<div id="box">
    <div>顶部元素</div>
    <div>左侧元素</div>
    <div>当前元素</div>
    <div>右侧元素</div>
    <div>底部元素</div>
</div>
<div id="block"></div>

<!--外间距合并，显示较大的值-->
<div id="box1"></div>
<div id="box2"></div>
<!--包含式外间距合并-->
<div id="father">
    <div id="son"></div>
</div>
</body>
</html>